<template>
    <el-container>
        <el-main>
            <el-descriptions 
                :column="1"
                size="default"
                border
                >
                <template #title>
                    <div class="myTitle">
                        <div class="title-item">QC</div>
                        <div>Sample</div>
                    </div>
                </template>
                <el-descriptions-item label="spikeIn">123</el-descriptions-item>
                <el-descriptions-item label="raw_reads">123</el-descriptions-item>
                <el-descriptions-item label="fastp">123</el-descriptions-item>
                <el-descriptions-item label="bowtie2">123</el-descriptions-item>
                <el-descriptions-item label="main_chr">123</el-descriptions-item>
                <el-descriptions-item label="picard">123</el-descriptions-item>
                <el-descriptions-item label="peak_n">123</el-descriptions-item>
                <el-descriptions-item label="TES" span="2">
                    <el-row>
                        <el-col>
                            <el-image 
                                :src="ex" 
                                fit="fill"
                            />
                        </el-col>
                        <el-col>
                            <el-image 
                                :src="ex" 
                                fit="fill"
                            />
                        </el-col>
                    </el-row>
                </el-descriptions-item>
                

            </el-descriptions>
        </el-main>
        <el-footer></el-footer>
    </el-container>
</template>

<script lang="ts" props="props" setup name="Reports">
    import ex from '../../../../public/static/imgs/GSM699631_TES.png'
</script>

<style scoped>
    .myTitle {
        width: 100%;
        display: flex;
        justify-content: space-around;
    }
    .title-item {
        margin-right: 123vh;
    }
</style>